<!-- 协议弹窗模板组件 -->
<template>
    <div class="protocol-dialog">
        <el-dialog
            :title="title"
            :visible.sync="isShow"
            :width="width"
            :margin-top= "marginTop"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @close="fn"
        >
            <slot></slot>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog()">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    @Component({
        components: {}
    })
    export default class DialogProtocol extends Vue {
        isShow: boolean = false;
        @Prop() title: string;
        @Prop({ default: '960px' }) width: string;
        @Prop({ default: '5%' }) marginTop: string;
        @Prop({
            default: () => () => {}
        }) close
        fn () {
            this.$emit('close');
        }
        openDialog () {
            this.isShow = true;
        }
        closeDialog () {
            this.isShow = false;
        }
    }
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
    .protocol-dialog {
        .el-dialog {
            margin-top: 6vh !important;
        }
        .el-dialog__header {
            background: $__color-bg-primary;
            text-align: center;
            height: 60px;
            line-height: 60px;
            padding: 0;
            .el-dialog__title {
                font-size: $__big-font-size;
                color: $__color-label;
            }
        }
        .el-dialog__headerbtn {
            font-size: 20px;
        }
        .el-dialog__body {
            height: 500px;
            overflow-y: scroll;
            color: $__color-show;
        }

        .el-dialog__footer {
            text-align: center;
            border-top: 1px solid $__color-border;
            .el-button--default {
                background: $__color-primary;
                width: 86px;
                height: 36px;
                color: #fff;
                border: none;
            }
        }
        .retract {
            text-indent: 28px;
        }
        .font-bold {
            font-weight: bold;
        }
        .font-con-title {
            font-size: $__big-font-size;
        }
        .content-padding {
            padding-top: 10px;
        }
        .emphasis-font {
            color: $__color-remind;
        }
        .sign-right {
            text-align: right;
            padding-right: 4px;
        }
    }
    .unit-dialog-form {
        .el-dialog__body {
            height: 180px !important;
            overflow-y: hidden;
        }
    }
</style>